<template>
  <el-select v-model="modelValue" style="width: 240px" v-bind="$attrs">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  dictCode: {
    type: String,
    default: ''
  }
})
const modelValue = defineModel()
onMounted(() => {
  console.log(props.dictCode)
})
const options = ref([
  {
    value: '选项1',
    label: '黄金糕'
  },
  {
    value: '选项2',
    label: '双皮奶'
  },
  {
    value: '选项3',
    label: '蚵仔煎'
  },
  {
    value: '选项4',
    label: '龙须面'
  },
  {
    value: '选项5',
    label: '北京烤鸭'
  }
])
watch(
  props.dictCode,
  () => {
    console.log('@@initDictData')
    initDictData()
  },
  {
    immediate: true,
    deep: true
  }
)
function selectApi() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          value: 'Option1',
          label: 'Option1'
        },
        {
          value: 'Option2',
          label: 'Option2'
        },
        {
          value: 'Option3',
          label: 'Option3'
        },
        {
          value: 'Option4',
          label: 'Option4'
        },
        {
          value: 'Option5',
          label: 'Option5'
        }
      ])
    }, 1000)
  })
}
function initDictData() {
  selectApi().then((res: any) => {
    options.value = res
  })
}
</script>

<style scoped></style>
